<template>
    <n-menu :options="menuOptions" accordion />
</template>
  
<script lang="ts" setup>
import type { MenuOption } from 'naive-ui'
import { NMenu, NIcon } from 'naive-ui'
import { ref } from 'vue'
import requset from "@/utils/requset"
import type { response } from "@/utils/requset"
import { onMounted, Component } from 'vue'
import { h } from 'vue'
import { RouterLink, useRouter } from 'vue-router'
import type { projectMenuRespones } from "@/utils/interfaces/respone"
import { BookOutline as BookIcon, LayersOutline as LayersOut, ClipboardOutline as Clipboard } from '@vicons/ionicons5'

const router = useRouter()

function renderIcon(icon: Component) {
    return () => h(NIcon, null, { default: () => h(icon) })
}

const projectId = ref(0);


const menuOptions = ref<MenuOption[]>([
])



function getData(projectId: number) {
    requset.get("/project", {
        "projectId": projectId
    }).then((res: response<projectMenuRespones>) => {
        if (res.status !== 200) {
            return;
        }
        menuOptions.value = []
        // console.log(res.data)
        let tires = res.data.data.tires;
        tires.forEach(trie => {
            let pointsMenu: MenuOption[] = []
            trie.points.forEach(point => {
                let entitsMenu: MenuOption[] = [];
                point.entities.forEach(entity => {
                    let entityMenu: MenuOption = {
                        label: () => h(
                            RouterLink,
                            {
                                to: {
                                    name: 'entity',
                                    query: {
                                        projectId: projectId,
                                        pointId: point.id,
                                        entityId: entity.id
                                    }
                                },
                            },
                            { default: () => entity.name }
                        ),
                        key: trie.id + '-' + point.id + '-' + entity.id,
                        icon: renderIcon(Clipboard)
                    }
                    entitsMenu.push(entityMenu)
                })
                let pointMeun: MenuOption = {
                    label: point.name,
                    key: trie.id + '-' + point.id,
                    children: entitsMenu,
                    icon: renderIcon(BookIcon)
                }
                pointsMenu.push(pointMeun)
            })
            let trieMenu: MenuOption = {
                label: trie.name,
                key: trie.id,
                children: pointsMenu,
                icon: renderIcon(LayersOut)
            }
            menuOptions.value.push(trieMenu)
        })
        // res.data.data.tires.forEach(item => {
        //     entityMenuData.value.push(item)
        // });

    })
}


onMounted(() => {
    // console.log(router.currentRoute.value)
    let projectIdIn = Number(router.currentRoute.value.query.projectId)
    if (Number.isNaN(projectIdIn) || projectIdIn == null || projectIdIn == 0) {
        projectIdIn = 0
    }

    projectId.value = projectIdIn
    getData(projectId.value)
})
</script>

<style scoped>
.entityMenu {
    height: 100vh;
    float: left;
}
</style>
  